<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
    <style>
        .a{
            border: 1px solid blue;
        }
        .b{
            padding: 15px;
        }
    </style>
</head>
<body>

<div id="a" style="padding: 20px">
    <h3>设置单值属性</h3>
    <a v-bind:href="url">{{url}}</a>

    <h3>设置数组语法</h3>
    <a v-bind:href="url"
    v-bind:class="['a','b']">
        {{url}}
    </a>

    <h3>设置对象语法</h3>
    <a v-bind:href="url"
       v-bind:class="{a:aFlag,b:bFlag}">
        {{url}}
    </a>

    <a v-bind:href="url"
    :style="{color:'green',fontSize:fsize}">
        {{url}}
    </a>

    <h3>设置函数语法</h3>
    <a v-bind:href="url"
       :style="mystyle()">
        {{url}}
    </a>
    <a v-bind:href="url"
       :style="mystyle1()">
        {{url}}
    </a>
    <a v-bind:href="url"
       :style="mystyle2()">
        {{url}}
    </a>
</div>

<script>
    var vue= new Vue({
        el:"#a",
        data:{
            url:"index.html",
            aFlag:true,
            bFlag:false,
            fsize:"2em"
        },
        methods:{
            mystyle:function () {
                return{color:'red',fontSize:this.fsize};
            },
            mystyle1:()=>{
                console.info(this);
                return{color:'blue',fontSize:'1.5em'};
            },
            mystyle2(){
                return {color:'yellow', fontSize: this.fsize};
            },
        }


    });
</script>

</body>
</html>